<template>
  <div class="activitys">
    <div class="tabBar">
        <div v-for="(item, index) in navLists"
        :key="index" class="boxNoClick" 
        :class="{boxClick:changeStyle == index}" 
        @click="isShow1(index)">{{item.text}}</div>
    </div>
    <!-- 未审 -->
    <ul class="leftContents" v-show="showHide1">
      <li>
        <div class="minBox" v-for="item in Lists" :key="item.id">
            <div class="leftContent">
             <img src="../imgs/vote-bg.jpg" width="220px" alt="">
             <p class="shenhe">审核</p>
            </div>
            <div class="rightContent">
              <p class="wenti">{{item.title}}</p>
              <p><b>{{item.introduce}}</b></p>
              <span>{{item.startTime}}</span>
          </div>
        </div>
      </li>
    </ul>
    <!-- 以审 -->
    <ul class="leftContents" v-show="showHide2">
      <li>
        <div class="minBox" v-for="item in secondList" :key="item.id">
            <div class="leftContent">
             <img src="../imgs/vote-bg.jpg" width="220px" alt="">
             <p :class="item.status == 2 ? 'shenheTwo' : 'shenhe'">{{item.status==0?'未开始':item.status==1?'进行中':item.status==2?'已结束':item.status == -2 ? '被驳回':''}}</p>
            </div>
            <div class="rightContent">
              <p class="wenti">{{item.title}}</p>
              <p><b>{{item.introduce}}</b></p>
              <span>{{item.startTime}}</span>
          </div>
        </div>
      </li>
    </ul>

  </div>
</template>

<script>
import api from "@/data/api/index.js";
export default {
  data() {
    return{
      navLists:[
          {
            "text":"待审"          
          },
          {
            "text":"已审核"          
          }
        ],
      changeStyle:0,
      showHide1: true,
      showHide2: false,
       // 全部列表
      Lists: [],
      // 以审核列表
      secondList:[]
    }
  },
  mounted(){
    this.getActivity()
  },
  methods: {
    isShow1(index) {
      if (this.changeStyle === 1) {
        this.showHide1 = true
        this.showHide2 = false
        this.changeStyle= index
      }else if (this.changeStyle === 0) {
        this.showHide2 = true
        this.showHide1 = false
        this.changeStyle= index
      }
    },
    getActivity(){
      api.activityList().then(res => {
        res.data
        this.Lists = []
        this.secondList = []
        for(let i = 0 ; i < res.data.length; i++){
          if(res.data[i].status == -1){
            this.Lists.push(res.data[i])
            
          }else{
            this.secondList.push(res.data[i])
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.activitys{
  margin: 0 20px;
  .tabBar{
    width: 100%;
    height: 100%;
    display: flex;
    .boxClick{
      width: 40px;
      height: 100%;
      font-size: 20px;
      font-weight: bold;
      border-bottom: 4px solid rgb(201,21,30);
    }
    .boxNoClick{ 
      width: 60px;
      height: 100%;
      font-size: 20px;
      margin-left: 20px;
      text-align: center;
    }
  }
  .leftContents li {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    padding: 20px 0px 20px 0px;
    background-size: 50px;
    border-radius: 10px;
    box-shadow: 2px 2px 8px #f2f2f2, -2px -2px 8px #f2f2f2;
    position: relative;
    .minBox{
      display: flex;
      justify-content: space-between;
      margin-bottom: 50px;
      .leftContent{
        img{
        border-radius: 15px;
        margin-left: 10px;
        margin-top: -15px;
      }
    .shenhe{
      width: 95px;
      height: 32px;
      background-color: rgb(253,120,79);
      border-radius: 15px;
      text-align: center;
      line-height: 32px;
      color: #fff;
      margin-left: 42px;
      margin-top: -16px;
      position: absolute;
      // padding: 0px 20px 0px 20px;
      // position: fixed;
    }
    .shenheTwo{
      width: 95px;
      height: 32px;
      background-color: rgb(160, 160, 160);
      border-radius: 15px;
      text-align: center;
      line-height: 32px;
      color: #fff;
      margin-left: 42px;
      margin-top: -16px;
      position: absolute;
    }
    }
    .rightContent{
    margin-left: 20px;
    width: 70%;
    .wenti{
      color: rgb(253,120,79);
      font-size: 18px;
    }
    p{
      padding-bottom: 10px;
    }
    span{
      color: rgb(105,105,105);
    }
  }
    }
  }
}
</style>